// 1.导入gulp模块 
const {series, src,dest,watch}=require('gulp');

//2.导入插件模块
const uglify=require('gulp-uglify');//js压缩         cnpm i gulp-uglify -D
const rename=require('gulp-rename');//重命名         cnpm i gulp-rename -D
const less=require('gulp-less');//less转css          cnpm i gulp-less -D
const cleanCss=require('gulp-clean-css');//css压缩   cnpm i gulp-clean-css -D
const imagemin=require('gulp-imagemin');//css压缩    cnpm i gulp-imagemin -D
const webserver=require('gulp-webserver');//css压缩    cnpm i gulp-webserver -D

//3.定义任务
//js压缩
function jsTask(){
    return src('./js/**/*.js')//表示源文件地址
        .pipe(uglify())//进行源文件压缩处理
        .pipe(rename({
            suffix:'.min'
        }))
        .pipe(dest('./dist/js'))//表示处理后文件放置的位置
}

//css处理
function cssTask(){
    return src('./less/**/*.less')//读源文件地址
        .pipe(less())//less转CSS
        .pipe(cleanCss())//css压缩
        .pipe(rename({//重命名
            suffix:'.min'
        }))
        .pipe(dest('./dist/css'))
}

//压缩图像
function imgTask(){
    return src('./imgs/**/*.{png,jpg,gif,ico}')//读源文件地址
        .pipe(imagemin())
        .pipe(dest('./dist/imgs'))
}

//上帝之眼  ---监听文件变化
function watchTask(){
    //less处理
    watch('./less/**/*.less',{
        events:['add','change']
    },cssTask)

     //js处理
    //  watch('./js/**/*.js',{
    //     events:['add','change']
    // },jsTask)

     //图像处理
     watch('./imgs/**/*.{png,jpg,gif,ico}',{
        events:['add','change']
    },imgTask)
}

//本地服务器
function serve(){
    return src('./')
        .pipe(webserver(
            {
                livereload: true,//热更新 会自动刷新页面
                open: true,//在浏览器中打开localhost服务器
                port:8080
            }
        ))
}

//4.导出任务
exports.imgTask=imgTask;
exports.jsTask=jsTask;
exports.cssTask=cssTask;
exports.default=series(serve,watchTask)